Format text and create a style

Format text and create a style

Before you begin the tutorial follow Guided tour of Dreamweaver to see an animated introduction to key features in Dreamweaver. The Guided Tour introduces you to the basic features of the Dreamweaver workspace.

Start this tutorial by opening a document and learning how to change tags for a paragraph and create a style that redefines the appearance a tag.

1 Choose File > Open and choose the file Tutorial_1.htm in the Tutorial folder located in the Dreamweaver application folder.

Tutorial_1.htm contains some unformatted text to show text type directly into the Document window appears.

To begin formatting, change the tag of the text on the first line.

2 Click in the middle of the words on the first line, "Bright Blue Cola", and then choose Text > Format > Heading 1.

The HTML tag of the paragraph changes to H1. The font becomes large and bold. Notice also that the tag selector area at the bottom left of the Document window now shows <body><h1>.

Use the tag selector to determine the tag of the current selection, or click a tag in the selector to select a tag that may be difficult to select in the Document window, such as <body>.

Now apply the same tag to a different paragraph using a shortcut.

3 Click in the paragraph "Buy some today!" and press Control-1 (Windows) or Command-1 (Macintosh)

This applies the H1 tag to the paragraph.

Now that you've defined two headings with the H1 tag, create a style the redefines how the H1 tag appears.

4 Choose Text > Custom Style > Edit Style Sheet.

5 In the Edit Style Sheet dialog box, click New.

6 In the New Style dialog box, click Redefine HTML Tag.

7 Enter H1 in the Tag box, and then click OK.

The Redefine HTML Tag option informs Dreamweaver that the style you are creating should change the formatting parameters of all text in the document controlled by the selected tag, in this case H1.

You can also define Custom Styles that can be applied to any selected range of text.

8 In the Style Definition for H1 dialog box, click Color and choose a bright blue color, click OK, and the click Done.

Notice that both of the H1 paragraphs in the document turn blue.

To continue the tutorial, proceed to Insert an image.

1	Choose File > Open and choose the file `Tutorial_1.htm` in the Tutorial folder located in the Dreamweaver application folder.
	`Tutorial_1.htm` contains some unformatted text to show text type directly into the Document window appears.
	To begin formatting, change the tag of the text on the first line.
2	Click in the middle of the words on the first line, "Bright Blue Cola", and then choose Text > Format > Heading 1.
	The HTML tag of the paragraph changes to `H1`. The font becomes large and bold. Notice also that the tag selector area at the bottom left of the Document window now shows `<body><h1>`.
	Use the tag selector to determine the tag of the current selection, or click a tag in the selector to select a tag that may be difficult to select in the Document window, such as `<body>`.
	Now apply the same tag to a different paragraph using a shortcut.
3	Click in the paragraph "Buy some today!" and press Control-1 (Windows) or Command-1 (Macintosh)
	This applies the H1 tag to the paragraph.
	Now that you've defined two headings with the H1 tag, create a style the redefines how the H1 tag appears.
4	Choose Text > Custom Style > Edit Style Sheet.
5	In the Edit Style Sheet dialog box, click New.
6	In the New Style dialog box, click Redefine HTML Tag.
7	Enter H1 in the Tag box, and then click OK.
	The Redefine HTML Tag option informs Dreamweaver that the style you are creating should change the formatting parameters of all text in the document controlled by the selected tag, in this case H1.
	You can also define Custom Styles that can be applied to any selected range of text.
8	In the Style Definition for H1 dialog box, click Color and choose a bright blue color, click OK, and the click Done.
	Notice that both of the H1 paragraphs in the document turn blue.